"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Modal, Platform } from "react-native"
import { LinearGradient } from "expo-linear-gradient"
import { X, GraduationCap } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface VipSubscriptionModalProps {
    visible: boolean
    onClose: () => void
    onSubscribe: (plan: string, price: number) => void
}

interface SubscriptionPlan {
    id: string
    duration: string
    price: number
    originalPrice: number
    popular?: boolean
}

export default function VipSubscriptionModal({ visible, onClose, onSubscribe }: VipSubscriptionModalProps) {
    const [selectedPlan, setSelectedPlan] = useState<string | null>(null)

    const plans: SubscriptionPlan[] = [
        { id: "year1", duration: "1年", price: 398, originalPrice: 398 },
        { id: "year3", duration: "3年", price: 539, originalPrice: 798, popular: true },
        { id: "year12", duration: "12年", price: 666, originalPrice: 1999 },
    ]

    const handleSubscribe = (planId: string) => {
        const plan = plans.find((p) => p.id === planId)
        if (plan) {
            onSubscribe(plan.duration, plan.price)
        }
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.overlay}>
                <View style={styles.modalContainer}>
                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                        <X size={20} color={theme.colors.neutral.gray} />
                    </TouchableOpacity>

                    <View style={styles.header}>
                        <View style={styles.avatarContainer}>
                            <GraduationCap size={24} color="#6A4AD4" />
                        </View>
                        <Text style={styles.headerTitle}>
                            您当前非会员<Text style={styles.trialText}>(试用时间为: 36小时)</Text>
                        </Text>
                        <Text style={styles.userIdText}>*****7750</Text>
                    </View>

                    <View style={styles.divider} />

                    <Text style={styles.sectionTitle}>开通会员</Text>

                    <View style={styles.plansContainer}>
                        {plans.map((plan) => (
                            <View key={plan.id} style={[styles.planCard, plan.popular && styles.popularPlanCard]}>
                                <Text style={styles.durationText}>{plan.duration}</Text>
                                <View style={styles.priceContainer}>
                                    <Text style={styles.currencySymbol}>¥</Text>
                                    <Text style={styles.priceText}>{plan.price}</Text>
                                </View>
                                <Text style={styles.originalPriceText}>¥{plan.originalPrice}</Text>
                                <TouchableOpacity style={styles.subscribeButton} onPress={() => handleSubscribe(plan.id)}>
                                    <LinearGradient colors={["#6A4AD4", "#5B3FC0"]} style={styles.subscribeButtonGradient}>
                                        <Text style={styles.subscribeButtonText}>开通</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                            </View>
                        ))}
                    </View>

                    <TouchableOpacity style={styles.restorePurchaseButton}>
                        <Text style={styles.restorePurchaseText}>恢复购买</Text>
                    </TouchableOpacity>

                    <View style={styles.divider} />

                    <Text style={styles.sectionTitle}>会员权益</Text>
                    <Text style={styles.benefitsText}>
                        会员在有效期内，获取APP的完全访问权，使用提供的所有单词书、享受升级送代服务，不另收取费用。
                    </Text>

                    <TouchableOpacity style={styles.agreementButton}>
                        <Text style={styles.agreementText}>《会员服务协议》</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContainer: {
        width: "90%",
        backgroundColor: "#FFFFFF",
        borderRadius: 16,
        padding: 20,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 10 },
                shadowOpacity: 0.25,
                shadowRadius: 10,
            },
            android: {
                elevation: 5,
            },
        }),
    },
    closeButton: {
        position: "absolute",
        top: 15,
        right: 15,
        zIndex: 10,
    },
    header: {
        alignItems: "center",
        marginBottom: 15,
    },
    avatarContainer: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: "#F0E7FF",
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 10,
    },
    headerTitle: {
        fontSize: 16,
        fontWeight: "600",
        color: theme.colors.neutral.black,
    },
    trialText: {
        color: "#FF9500",
        fontWeight: "normal",
    },
    userIdText: {
        fontSize: 14,
        color: theme.colors.neutral.darkGray,
        marginTop: 5,
    },
    divider: {
        height: 1,
        backgroundColor: "#F0F0F0",
        marginVertical: 15,
    },
    sectionTitle: {
        fontSize: 18,
        fontWeight: "bold",
        color: theme.colors.neutral.black,
        marginBottom: 15,
    },
    plansContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 15,
    },
    planCard: {
        width: "31%",
        borderWidth: 1,
        borderColor: "#E0D0A0",
        borderRadius: 12,
        padding: 10,
        alignItems: "center",
        backgroundColor: "#FFFBF0",
    },
    popularPlanCard: {
        borderColor: "#E0D0A0",
        borderWidth: 1.5,
    },
    durationText: {
        fontSize: 16,
        fontWeight: "600",
        color: theme.colors.neutral.black,
        marginBottom: 5,
    },
    priceContainer: {
        flexDirection: "row",
        alignItems: "flex-end",
        marginBottom: 5,
    },
    currencySymbol: {
        fontSize: 14,
        fontWeight: "bold",
        color: "#A0723B",
    },
    priceText: {
        fontSize: 24,
        fontWeight: "bold",
        color: "#A0723B",
    },
    originalPriceText: {
        fontSize: 12,
        color: theme.colors.neutral.gray,
        textDecorationLine: "line-through",
        marginBottom: 10,
    },
    subscribeButton: {
        width: "100%",
        borderRadius: 20,
        overflow: "hidden",
    },
    subscribeButtonGradient: {
        paddingVertical: 8,
        alignItems: "center",
        justifyContent: "center",
    },
    subscribeButtonText: {
        color: "#FFFFFF",
        fontSize: 14,
        fontWeight: "600",
    },
    restorePurchaseButton: {
        alignSelf: "center",
        marginBottom: 15,
    },
    restorePurchaseText: {
        fontSize: 14,
        color: "#6A4AD4",
    },
    benefitsText: {
        fontSize: 14,
        color: theme.colors.neutral.darkGray,
        lineHeight: 20,
        marginBottom: 15,
    },
    agreementButton: {
        alignSelf: "center",
    },
    agreementText: {
        fontSize: 14,
        color: "#6A4AD4",
        textDecorationLine: "underline",
    },
})

